<template>
  <div class="user-dropdown" @mouseenter="showDropdown" @mouseleave="hideDropdown">
    <!-- 用户头像和用户名 -->
    <div class="user-info">
      <div class="user-avatar">
        <img v-if="getUserAvatar" :src="getUserAvatar" :alt="getUserDisplayName" class="avatar-img">
        <div v-else class="avatar-placeholder" :style="{ backgroundColor: getAvatarBgColor(getUserDisplayName), color: 'white' }">
          {{ getAvatarText(getUserDisplayName) }}
        </div>
      </div>
      <span class="username">{{ getUserDisplayName }}</span>
      <i class="dropdown-arrow">▼</i>
    </div>
    
    <!-- 下拉菜单 -->
    <div class="dropdown-menu" :class="{ 'show': isDropdownVisible }">
      <div class="dropdown-header">
        <div class="user-avatar-large">
          <img v-if="getUserAvatar" :src="getUserAvatar" :alt="getUserDisplayName" class="avatar-img-large">
          <div v-else class="avatar-placeholder-large" :style="{ backgroundColor: getAvatarBgColor(getUserDisplayName), color: 'white' }">
            {{ getAvatarText(getUserDisplayName) }}
          </div>
        </div>
        <div class="user-details">
          <div class="username-large">{{ getUserDisplayName }}</div>
          <div class="user-email">{{ userInfo.email || '用户' }}</div>
        </div>
      </div>
      
      <div class="dropdown-divider"></div>
      
      <ul class="dropdown-list">
        <li 
          v-for="item in menuItems" 
          :key="item.id" 
          class="dropdown-item" 
          @click="handleMenuClick(item.action)"
        >
          <i class="icon">{{ item.icon }}</i>
          <span>{{ item.label }}</span>
        </li>

        <li class="dropdown-divider"></li>
        <li class="dropdown-item logout" @click="logout">
          <i class="icon">🚪</i>
          <span>退出</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { buildImageURL } from '@/config/api-config'
import logger from '../utils/logger.js'

export default {
  name: 'UserDropdown',
  props: {
    userInfo: {
      type: Object,
      required: true,
      default: () => ({
        username: '',
        email: '',
        avatar: ''
      })
    }
  },
  mounted() {
    logger.log('🎨 [UserDropdown] 组件已挂载');
    logger.log('🎨 [UserDropdown] 接收到的用户信息:', this.userInfo);
  },
  watch: {
    userInfo: {
      handler(newUserInfo) {
        logger.log('🔄 [UserDropdown] 用户信息变化:', newUserInfo);
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      isDropdownVisible: false,
      hideTimeout: null,
      // 定义所有下拉菜单项及其角色权限
      allMenuItems: [
        { id: 1, icon: '👥', label: '我的团队', action: 'goToTeam', roles: [1, 2, 5] }, // 管理员、教师、家长
        { id: 2, icon: '👨‍🎓', label: '添加学生账号', action: 'goToAddStudents', roles: [1, 2] }, // 管理员、教师
        { id: 3, icon: '👨‍🏫', label: '管理员添加教师', action: 'goToAddTeacher', roles: [1] }, // 仅管理员
        { id: 4, icon: '💼', label: '布置作业', action: 'goToWork', roles: [1, 2] }, // 管理员、教师
        { id: 5, icon: '🏆', label: '比赛管理', action: 'goToContestManagement', roles: [1, 2] }, // 管理员、教师
        { id: 6, icon: '📁', label: '我的文件', action: 'goToDocuments', roles: [1, 2, 5] }, // 管理员、教师、家长
        { id: 7, icon: '🏠', label: '个人中心', action: 'goToPersonalCenter', roles: [] }, // 所有角色可见
        { id: 8, icon: '⚙️', label: '管理中心', action: 'goToManagement', roles: [1, 2] }, // 管理员、教师
      ]
    };
  },
  computed: {
    // 获取用户头像
    getUserAvatar() {
      if (!this.userInfo) return null;
      return buildImageURL(this.userInfo.avatar) || null;
    },
    
    // 获取用户显示名称
    getUserDisplayName() {
      if (!this.userInfo) return '用户';
      return this.userInfo.nickname || this.userInfo.username || '用户';
    },
    
    // 根据用户角色过滤菜单项
    menuItems() {
      const userRole = this.getUserRole()
      logger.log('🔍 [UserDropdown] 当前用户角色:', userRole)
      
      // 如果角色未知，只显示个人中心
      if (!userRole) {
        return this.allMenuItems.filter(item => item.roles.length === 0)
      }
      
      // 过滤菜单项：如果roles为空数组，表示所有角色可见；否则只显示包含当前角色的项
      const filteredItems = this.allMenuItems.filter(item => {
        // roles为空数组表示所有角色可见
        if (item.roles.length === 0) {
          return true
        }
        // 否则检查当前角色是否在允许列表中
        return item.roles.includes(userRole)
      })
      
      logger.log('📋 [UserDropdown] 过滤后的菜单项数量:', filteredItems.length)
      return filteredItems
    }
  },
  methods: {
    // 获取当前用户的角色
    getUserRole() {
      try {
        // 首先从JWT令牌中获取role
        const token = localStorage.getItem('token')
        if (token) {
          try {
            const tokenParts = token.split('.')
            if (tokenParts.length === 3) {
              const payloadStr = atob(tokenParts[1])
              
              // 使用正则表达式提取role
              const roleMatch = payloadStr.match(/"role":(\d+)/)
              if (roleMatch && roleMatch[1]) {
                const role = parseInt(roleMatch[1])
                return role
              }
              
              // 备用方案：使用JSON.parse
              const payload = JSON.parse(payloadStr)
              const role = payload.claims?.role
              if (role !== undefined) {
                return parseInt(role)
              }
            }
          } catch (tokenError) {
            // JWT解析失败，继续尝试其他方法
          }
        }
        
        // 备选方案：从localStorage获取用户信息
        const userInfoStr = localStorage.getItem('userInfo')
        if (userInfoStr) {
          const userInfo = JSON.parse(userInfoStr)
          const role = userInfo.role
          if (role !== undefined) {
            // role可能是数字或字符串
            const roleNum = typeof role === 'string' ? parseInt(role) : role
            return roleNum
          }
        }
      } catch (error) {
        logger.error('❌ [UserDropdown] 获取用户角色失败:', error)
      }
      
      return null // 返回null表示未知角色
    },
    
    // 处理菜单项点击
    handleMenuClick(action) {
      if (this[action] && typeof this[action] === 'function') {
        this[action]()
      } else {
        logger.warn('⚠️ [UserDropdown] 未找到方法:', action)
      }
    },
    
    // 显示下拉菜单
    showDropdown() {
      if (this.hideTimeout) {
        clearTimeout(this.hideTimeout);
        this.hideTimeout = null;
      }
      this.isDropdownVisible = true;
    },
    
    // 隐藏下拉菜单（延迟隐藏以避免鼠标移动时闪烁）
    hideDropdown() {
      this.hideTimeout = setTimeout(() => {
        this.isDropdownVisible = false;
      }, 200);
    },
    
    // 获取头像文字（用户名首字母）
    getAvatarText(username) {
      if (!username) return 'U';
      
      // 如果用户名是邮箱格式，取@前面部分的首字母
      if (username.includes('@')) {
        const emailPrefix = username.split('@')[0];
        return emailPrefix.charAt(0).toUpperCase();
      }
      
      // 如果是中文用户名，取最后一个字符
      if (/[\u4e00-\u9fa5]/.test(username)) {
        return username.charAt(username.length - 1);
      }
      
      // 默认取首字母
      return username.charAt(0).toUpperCase();
    },
    
    // 生成头像背景色（基于用户名）
    getAvatarBgColor(username) {
      if (!username) return '#4CAF50';
      
      const colors = [
        '#4CAF50', '#2196F3', '#FF9800', '#9C27B0', 
        '#F44336', '#009688', '#795548', '#607D8B',
        '#8BC34A', '#3F51B5', '#FF5722', '#E91E63'
      ];
      
      let hash = 0;
      for (let i = 0; i < username.length; i++) {
        hash = username.charCodeAt(i) + ((hash << 5) - hash);
      }
      
      return colors[Math.abs(hash) % colors.length];
    },
    
    // 导航方法
    goToTeam() {
      this.$router.push('/my-team');
      this.isDropdownVisible = false;
    },
    
    goToAddStudents() {
      this.$router.push('/add-students');
      this.isDropdownVisible = false;
    },
    
    goToAddTeacher() {
      this.$router.push('/add-teacher');
      this.isDropdownVisible = false;
    },
    
    goToWork() {
      this.$router.push('/assign-homework');
      this.isDropdownVisible = false;
    },
    
    goToStudentWork() {
      this.showDevNotice('学生作品');
      this.isDropdownVisible = false;
    },
    
    goToDocuments() {
      this.showDevNotice('我的文件');
      this.isDropdownVisible = false;
    },
    
    goToPersonalCenter() {
      this.$router.push('/personal-center');
      this.isDropdownVisible = false;
    },
    
    goToManagement() {
      this.$router.push('/management');
      this.isDropdownVisible = false;
    },
    
    goToContestManagement() {
      this.$router.push('/contest-management');
      this.isDropdownVisible = false;
    },
    
    // 显示功能待开发提示
    showDevNotice(featureName) {
      logger.log(`🚧 [UserDropdown] 用户点击了待开发功能: ${featureName}`);
      alert(`🚧 "${featureName}"功能待开发中，敬请期待！`);
    },

    
    // 退出登录
    async logout() {
      logger.warn('🔥 [LOGOUT] 退出方法被调用！');
      logger.warn('🔥 [LOGOUT] 时间戳:', new Date().toISOString());
      
      const userConfirmed = confirm('确定要退出登录吗？');
      logger.warn('🔥 [LOGOUT] 用户选择结果:', userConfirmed ? '确认退出' : '取消退出');
      
      if (userConfirmed) {
                logger.warn('🔥 [LOGOUT] 用户确认退出！开始执行退出流程...');
        logger.log('🚪 ===== 开始退出登录流程 =====');
        
        // 导入统一API配置显示实际代理目标
        const { default: API_CONFIG } = await import('@/api/apiConfig.js');
        logger.log(`🌐 目标接口: /api/goc/user/logout (通过代理到 ${API_CONFIG.getFullURL('/goc/user/logout')})`);
        
        // 检查当前登录状态
        const token = localStorage.getItem('token');
        const userInfo = localStorage.getItem('userInfo');
        logger.log('🔍 当前登录状态检查:');
        logger.log('  - 是否有JWT令牌:', !!token);
        logger.log('  - 是否有用户信息:', !!userInfo);
        if (token) {
          logger.log('  - JWT令牌内容:', token);
        }
        
        let apiCallSuccess = false;
        
        // 检查token类型，判断是否需要调用后端API
        const isTemporaryToken = token && (
          token.startsWith('temp_token_') || 
          token.startsWith('login_token_') || 
          token.startsWith('account_login_token_')
        );
        
        const isRealJWT = token && token.startsWith('eyJ');
        
        logger.log('🔍 Token类型分析:');
        logger.log('  - 是否为临时token:', isTemporaryToken);
        logger.log('  - 是否为真实JWT:', isRealJWT);
        logger.log('  - token前缀:', token ? token.substring(0, 20) + '...' : 'null');
        
        if (isTemporaryToken) {
          logger.log('⏭️ 检测到临时token，跳过后端API调用，直接清理本地状态');
          apiCallSuccess = true; // 标记为成功，直接进行本地清理
        } else {
          try {
            logger.warn('🔥 [LOGOUT] 开始API调用流程...');
            logger.log('🚀 准备调用后端退出登录API...');
            
            // 导入用户API
            logger.warn('🔥 [LOGOUT] 正在导入用户API模块...');
            const { userApi } = await import('../api/user.js');
            logger.warn('🔥 [LOGOUT] 用户API模块导入成功！');
            
            // 调用后端退出登录接口归还JWT令牌
            logger.warn('🔥 [LOGOUT] 即将调用 userApi.logout()...');
            logger.log('📞 正在调用 userApi.logout()...');
            const response = await userApi.logout();
            logger.warn('🔥 [LOGOUT] userApi.logout() 调用完成！');
            
            logger.log('✅ 后端退出登录API调用成功！');
            logger.log('📥 后端响应:', response);
            apiCallSuccess = true;
            
          } catch (error) {
            logger.error('🔥 [LOGOUT] API调用异常！');
            logger.error('❌ 调用退出登录API失败:', error);
            logger.error('❌ 完整错误信息:', {
              message: error.message,
              status: error.response?.status,
              statusText: error.response?.statusText,
              data: error.response?.data,
              headers: error.response?.headers
            });
            
            // 显示错误提示，但询问用户是否继续本地清理
            const shouldContinue = confirm(
              `⚠️ 后端退出接口调用失败！\n` +
              `错误信息: ${error.message}\n\n` +
              `是否继续清理本地登录状态？\n` +
              `注意：选择"确定"将只清理前端状态，后端可能仍认为您处于登录状态。`
            );
            
            if (!shouldContinue) {
              logger.warn('🔥 [LOGOUT] 用户选择不继续，退出流程终止');
              this.isDropdownVisible = false;
              return;
            }
            
            logger.warn('🔥 [LOGOUT] 用户选择继续本地清理流程...');
            logger.log('⚠️ 继续执行本地登录状态清理...');
          }
        }
        
        // 清除本地存储的所有用户相关信息
        localStorage.removeItem('userInfo');
        localStorage.removeItem('token');
        localStorage.removeItem('loginHint');
        
        logger.warn('🔥 [LOGOUT] 本地数据清理完成！');
        logger.log('✅ 用户已退出登录，所有本地数据已清除');
        
        // 根据API调用结果显示不同的提示
        if (apiCallSuccess) {
          logger.log('🎉 完整退出流程成功：前端和后端状态都已清理');
        } else {
          logger.warn('⚠️ 部分退出流程完成：仅前端状态已清理，后端状态可能未同步');
          // 可选：显示提示信息
          setTimeout(() => {
            alert('⚠️ 注意：只清理了前端登录状态，后端可能仍认为您处于登录状态。如需完全退出，请重新尝试或联系管理员。');
          }, 500);
        }
        
        // 跳转到登录页
        logger.warn('🔥 [LOGOUT] 准备跳转到登录页...');
        this.$router.push('/login');
        
        // 触发全局事件通知其他组件用户已退出
        logger.warn('🔥 [LOGOUT] 触发user-logout事件...');
        this.$emit('user-logout');
        
        logger.warn('🔥 [LOGOUT] 退出流程完成！');
      } else {
        logger.warn('🔥 [LOGOUT] 用户取消退出');
      }
      this.isDropdownVisible = false;
    }
  }
};
</script>

<style scoped>
.user-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #4CAF50;
  color: white;
  border-radius: 20px;
  transition: all 0.3s ease;
  min-width: 100px;
  cursor: pointer;
  border: 2px solid transparent;
}

.user-info:hover {
  background-color: #45A049;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.user-avatar {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
}

.username {
  font-size: 13px;
  font-weight: 600;
  margin-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.dropdown-arrow {
  font-size: 8px;
  transition: transform 0.3s ease;
  opacity: 0.8;
}

.user-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  min-width: 280px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.user-avatar-large {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.avatar-img-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder-large {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50%;
}

.user-details {
  flex: 1;
}

.username-large {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.user-email {
  font-size: 13px;
  opacity: 0.9;
  word-break: break-all;
}

.dropdown-divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 0;
}

.dropdown-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #333;
  font-size: 14px;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.logout {
  color: #f44336;
}

.dropdown-item.logout:hover {
  background-color: #ffebee;
}

.dropdown-item .icon {
  margin-right: 12px;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.dropdown-item span {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dropdown-menu {
    right: -10px;
    min-width: 260px;
  }
  
  .user-info {
    padding: 6px 12px;
    min-width: 100px;
  }
  
  .username {
    font-size: 13px;
    max-width: 80px;
  }
}
</style> 